import styled from "styled-components";
import { HTMLAttributes } from "react";
import { clsx } from "clsx";
import { DownOutlined } from "@ant-design/icons";

const Wrapper = styled.div<{ $indentLevel?: number }>`
  ${({ $indentLevel }) => {
    if (!$indentLevel) return "";
    return `
    &.indent-level-${$indentLevel} { 
      margin-left: ${$indentLevel * 25}px;
    }
    `;
  }}

  background: black;
  color: white;
  padding: 4px 10px;
  font-size: 12px;
  display: inline-block;
  border-radius: 20px;
  transition: 200ms;
  cursor: pointer;

  &:hover {
    opacity: 0.8;
  }
`;

interface Props extends HTMLAttributes<HTMLDivElement> {
  indentLevel?: number;
  hiddenReplyAmount: number;
}
export function LoadRepliesButton(props: Props) {
  const { indentLevel, className, hiddenReplyAmount, ...restProps } = props;
  return (
    <Wrapper
      className={clsx("load-replies-button", className, {
        [`indent-level-${indentLevel}`]: indentLevel,
      })}
      {...restProps}
      $indentLevel={indentLevel}
    >
      <DownOutlined style={{ marginRight: 4 }} />
      <span>
        展开 <strong>{hiddenReplyAmount}</strong> 条回复
      </span>
    </Wrapper>
  );
}
